<template>


  <div class="simple-keyboard"></div>

</template>
<script setup lang='ts'>
import { onMounted, ref, watch } from 'vue'

import Keyboard from 'simple-keyboard'
import 'simple-keyboard/build/css/index.css'
const emit = defineEmits(['onChange', 'onKeyPress'])
let props = defineProps(['input'])
const onChange = (input) => {
  emit('onChange', input)
}


const baseLayout = {
  default: [
    '- 1 2 3 ! @ # % _ $',
    '+ 4 5 6 * $ ` & / ?',
    '. 7 8 9 : ^ = {bksp}',
    '{shift} 0 {enter}',
  ],
  shift: [
    'q w e r t y u i o p',
    'a s d f g h j k l',
    '{lock} z x c v b n m {bksp}',
    '{shift} . {enter}',
  ],
  lock: [
    'Q W E R T Y U I O P',
    'A S D F G H J K L',
    '{lock} Z X C V B N M {bksp}',
    '{shift} . {enter}',
  ],
};
//取11位长度（限制手机号使用，重置keyboard 的input值）
function resetKeyboardVal(newval) {
  keyboard.value.setInput(newval)
}
defineExpose({ resetKeyboardVal })

function handleShift() {
  
  const currentLayout = keyboard.value.options.layoutName;
  const newLayout = currentLayout === 'default' ? 'shift' : 'default';
  keyboard.value.setOptions({
    layoutName: newLayout,
    display: {
      '{shift}': newLayout === 'default' ? 'abc.' : '数字',
      '{bksp}': '删除',
      '{enter}': '完成',
      '{lock}': '大小写',
      
    },
  });
}

function handleLock() {
  const currentLayout = keyboard.value.options.layoutName;
  const newLayout = currentLayout === 'shift' ? 'lock' : 'shift';
  keyboard.value.setOptions({
    layoutName: newLayout,
  });
}
const onKeyPress = (button) => {

  if (button === '{shift}') {
    handleShift()
  }
  if (button === '{lock}') {
    handleLock()
  }
  emit('onKeyPress', button)
}
let keyboard: any = ref(null)
onMounted(() => {

  keyboard.value = new Keyboard('simple-keyboard', {
    onChange,
    onKeyPress,
    layout: baseLayout,

    display: {
      '{bksp}': '删除',
      '{enter}': '完成',
      '{lock}': '大小写',
      '{shift}': 'abc.',
    },

  })

  keyboard.value.setInput(props.input)
})
//这里watch 放到onMounted里 保证第一执行
watch(() => props.input,
  (newVal) => { keyboard.value.setInput(newVal) }
)


</script>
<style lang='scss' >
.simple-keyboard {
  position: fixed;
  bottom: 0;
  left: 0;

  .hg-button-lock,
  .hg-button-bksp,
  .hg-button-enter {

    font-weight: bold;
  }

  .hg-button {
    padding: 22px 5px;
    font-size: 18px;
    width: 10% !important;

  }

  .hg-button-enter {
    width: calc(80% + 40px) !important;
    color: #67C23A;
  }

  .hg-button[data-skbtn="l"] {
    // width: calc(100% - 20% + 20px);
    //width: calc(20% )!important;
  }

  .hg-button[data-skbtn="@"] {
    max-width: none !important;
  }

  .hg-button-bksp {
    width: calc(30% + 10px) !important;
    padding-left: 10px;
    box-sizing: border-box;
    color: #F56C6C;

  }
}
</style>
